<x-home-layout>
    <div class="flex flex-col items-center justify-center items-center h-screen">
        <div class="flex flex-col gap-8 max-w-96 justify-center">
            <img src="youtube.svg" />
        </div>
        <div class="flex flex-col gap-8 max-w-[2/3] justify-center">
            <div class="text-white leading-10 text-2xl mt-5">Join or create a chat room and start watching youtube in sync</div>
            <div class="flex flex-col text-white">
                <p>1. built with laravel, pusher, vue, tailwind</p>
                <p>2. users able to create a room or join a room</p>
                <p>3. any user in the room able to watch youtube videos in sync</p>
                <p>4. users able to chat with emoji and text in the room</p>
                <p>5. users able to take action on youtube video player like play, pause and seek in sync</p>
                <p>6. users need to register and login to use the app</p>
                <p>7. users able to change the video url in the chatroom</p>
            </div>
            <div class="w-full flex justify-center">
                <a class="black-btn w-48 p-28 text-2xl text-center" href="/chatroom/create">Create a room</a>
            </div>
        </div>
    </div>
</x-home-layout>
